<template>
	<div class="index_section_wrapper" v-loading="loading">
		<div class="header">
			<el-input v-model="searchValue" clearable @keyup.enter.native="handleSearchCourse()"></el-input>
			<el-button type="primary" icon="el-icon-search" @click="handleSearchCourse()">检索</el-button>
		</div>
		<div class="wrapper">
			<el-row :gutter="20" v-if="courseListData.length > 0">
				<el-col :sm="24" :md="12" v-for="(item, index) in courseListData" :key="index">
					<div class="index_course_item" @click="handleLookCourse(item.id)">
						<el-image :src="item.imageUrl" fit="cover"></el-image>
						<h4>{{ item.title }}</h4>
						<p>
							<span>{{ item.updateTime }}</span>
							<span>课程来源：{{ item.extFiled2 }}</span>
						</p>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { queryCourseListData } from '@/api/openApi';
export default {
	data() {
		return {
			loading: false,
			searchValue: '',
			courseListData: []
		};
	},
	computed: { ...mapGetters(['siteInfo']) },
	async mounted() {
		this.handleSearchCourse();
	},
	methods: {
		//获取课程封面图
		getCourseImage(data) {
			let imageUrl = '';
			let httpUrl = data.sysAttachment?.httpUrl;
			if (!!httpUrl) {
				imageUrl = httpUrl.replaceIP();
			} else if (!!this.siteInfo.defaultCourseImg) {
				imageUrl = this.siteInfo.defaultCourseImg;
			} else {
				imageUrl = require('@/assets/img/course-cover.jpg');
			}
			return { ...data, imageUrl };
		},

		//获取课程列表
		async getCourseListData(type) {
			let obj = { page: 1, limit: 10, title: this.searchValue };
			let params = { ...obj, status: 1, auditStatus: 2, courseType: 6 };
			let result = await queryCourseListData(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				let datas = result.data || [];
				this.courseListData = datas.map((n) => this.getCourseImage(n));
			}
		},

		//搜索课程
		handleSearchCourse() {
			this.loading = true;
			this.getCourseListData();
		},

		//查看课程
		handleLookCourse(id) {
			this.$router.push(`/front/trainingResources/${id}`);
		}
	}
};
</script>

<style lang="scss" scoped>
.index_section_wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 32px 0;
	width: 100%;
	flex: 1;
	background: url('~@/assets/img/index_bg.jpg') no-repeat center;
	background-size: cover;
	.header::v-deep {
		display: flex;
		width: 100%;
		height: 40px;
		font-size: 16px;
		line-height: 1;
		padding: 0 10px;
		max-width: 768px;
		box-sizing: border-box;
		.el-button {
			display: flex;
			align-items: center;
			font-size: inherit;
			line-height: inherit;
			margin-left: 15px;
		}
		.el-input {
			flex: 1;
			font-size: inherit;
		}
		.el-input__inner {
			height: 100%;
		}
		.el-input__suffix {
			font-size: 16px;
		}
	}
	.el-row {
		padding-top: 12px;
		min-height: 370px;
	}
	.el-col {
		margin-top: 10px;
	}
}
.index_course_item {
	padding: 1px;
	cursor: pointer;
	overflow: hidden;
	border-radius: 4px;
	border: solid 1px transparent;
	transition: border-color 0.3s;
	.el-image {
		float: left;
		width: 96px;
		height: 54px;
		border-radius: 4px;
	}
	h4 {
		// display: inline-block;
		height: 20px;
		font-size: 16px;
		line-height: 20px;
		margin-left: 108px;
		font-weight: normal;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		color: #303133;
	}
	p {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		font-size: 14px;
		margin-top: 6px;
		line-height: 18px;
		margin-left: 108px;
	}
	span {
		color: #606266;
		margin-right: 16px;
	}
	&:hover {
		border-color: var(--primary-hover);
		background-color: var(--primary-background-plain-disabled);
		h4 {
			color: var(--primary-hover);
		}
	}
}
@media (min-width: 768px) {
	.index_section_wrapper {
		.header {
			height: 48px;
			font-size: 18px;
		}
		.el-col {
			margin-top: 10px;
		}
	}
	.index_course_item {
		h4 {
			height: 24px;
			font-size: 18px;
			line-height: 24px;
		}
		p {
			font-size: 15px;
			line-height: 20px;
		}
	}
}
</style>
